<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>{$basic.title}</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
	<link href="__LAYUI__/css/layui.css" rel="stylesheet">
    <link href="__LAYUI__/css/ah.css" rel="stylesheet">
</head>
<body>
<div class="wrapper-content">
<div class="ibox">
	<div class="ibox-title"><h3>编辑文章</h3>
	</div>
	<div class="ibox-content">
		<form class="layui-form" enctype="multipart/form-data" id="amData" lay-filter="amData" action="{:url('article/edit')}">
				  <div class="layui-form-item">
					<label class="layui-form-label">标题</label>
					<div class="layui-input-block">
					  <input type="text" name="title" value="{$data.title}" lay-verify="required"  placeholder="请输入标题" class="layui-input">
					</div>
				  </div>
				  <div class="layui-form-item">
					<div class="layui-inline">
					  <label class="layui-form-label">作者</label>
					  <div class="layui-input-inline">
						<input type="tel" name="author" value="{$data.author}" autocomplete="off" class="layui-input">
					  </div>
					</div>
				  </div>
				  <div class="layui-form-item">
					<label class="layui-form-label">状态</label>
					<div class="layui-input-inline">
					  <input type="checkbox" name="status" {if $data.status}checked{/if} lay-skin="switch" lay-text="ON|OFF">
					</div>
				  </div>
				  <div class="layui-form-item">
					<label class="layui-form-label">标签</label>
					<div class="layui-input-block">
					<div id="tagSelect"></div>
					</div>
				  </div>
				  <div class="layui-form-item">
				    <label class="layui-form-label">分类</label>
				    <div class="layui-input-inline" id="LAY-auth-tree-convert-select-dom">
				  	
				    </div>
				  </div>
				  <div class="layui-form-item">
					<label class="layui-form-label">封面图片</label>
					<div class="layui-input-block">
						<button type="button" class="layui-btn" id="upload_img_btn">
						  <i class="layui-icon">&#xe67c;</i>上传封面图片
						</button>
						<input type="file" name="thumb" id="upload_img" class="layui-hide">
					</div>
				  </div>
				  <div class="layui-form-item">
					<label class="layui-form-label"> </label>
					<div class="layui-input-block">
						<img src="{$data.thumb|default='/static/pic/empty.jpg'}" height="100" id="upload_img_src">
					</div>
				  </div>
				  <div class="layui-form-item">
					<label class="layui-form-label">内容</label>
					<div class="layui-input-block">
					    <textarea name="text" id="myLayedit">{$data.text}</textarea>
					</div>
				  </div>
					<input type="hidden" name="id" value="{$data.id}">
					<input type="hidden" id="editImage" data-am='{"id":{$data.id},"site":"article","type":"file"}'>
					<button type="button" class="layui-btn" lay-submit lay-filter="saveData">保存提交</button>
		</form>
	</div>
</div>
</div>
</body>
<script src="__LAYUI__/layui.js"></script>
<script src="__LAYUI__/exts/xm-select.js"></script>
<!-- 树转单选树的DOM -->
<script type="text/html" id="LAY-auth-tree-convert-select">
        <select name="cate" class="layui-input" lay-filter="{{d.layFilter}}">
          {{# layui.each(d.list, function(index, item) { }}
          <option value="{{item.value}}">{{item.name}}</option>
          {{# });}}
        </select>
</script>
<!--隐藏左侧操作的DOM-->
<script>
layui.config({
		base: '__LAYUI__/exts/',
	}).extend({
		authtree: 'authtree',
	});
  layui.use(['layer','jquery','layedit','authtree','form','laytpl'],function(){
	var $ = layui.jquery;
    var layer = layui.layer;
    var form = layui.form;
	var authtree = layui.authtree;
	var layedit = layui.layedit;
	    var laytpl = layui.laytpl;
	var xaoam ={
		  close:function(msg){
			  layer.msg(msg);
			  if(parent.length > 0){
				  let index = parent.layer.getFrameIndex(window.name);
				  parent.layer.close(index);
				  parent.Wxaoam.init();
			  }
			  
		  },
		  tool:function(){
			$(document).ready(function(){
				$('#upload_img_btn').on('click',function(){
					$('#upload_img').click();
				});
				$('#upload_img').on('change', function(){
					var getUrl = null;
					var file = this.files[0]; 
					if (window.createObjectURL != undefined) { // basic
					getUrl = window.createObjectURL(file);
					} else if (window.URL != undefined) { // mozilla(firefox)
					getUrl = window.URL.createObjectURL(file);
					} else if (window.webkitURL != undefined) { // webkit or chrome
					getUrl = window.webkitURL.createObjectURL(file);
					}else{
						return false;
					}
					if(file.type == 'image/jpeg' || file.type == 'image/png' || file.type == 'image/gif'){
						if(file.size < {:reKb(0.2)}){
							$('#upload_img_src').attr('src',getUrl);
						}else{
							layer.msg('请上传图片,并且小300KB')
						}
					}
				});
			  });
				form.on('submit(saveData)',function(data){
					var action = $(this).parent('form').attr('action');
					var index = parent.layer.getFrameIndex(window.name);
					var Fdata = new FormData(document.getElementById("amData"));
						Fdata.set('text',layedit.getContent(iedit));
						Fdata.append('tag', Fdata.get('select'));
					$.ajax({
						url:action,
						data:Fdata,
						dataType:'json',
						type:'POST',
						contentType: false,
						processData: false,
						success:function(res){
							if(res.code == 200){
								xaoam.close(res.msg);
							}else{
								layer.msg(res.msg);
							}
						}
					})
				  return false; 
				});
		  },
		 init:function(){
						var tabSelect = xmSelect.render({
							el: '#tagSelect', 
							autoRow: true,
							cascader: {show: true,indent: 100},
							height: '200px',
							prop: {
								value: 'id',
								children:'child',
							},
							data(){	return 	{$selectData|raw}	}
						})
						layui.form.render();
						['strict'].forEach(function(key){
							layui.form.on('checkbox('+key+')', function(data){
								var config = {
								};
								config[key] = data.elem.checked;
								tagSelect.update({
									cascader: config
								})
							});
						})
						tabSelect.setValue([{$data.tag}]);
				$.ajax({
			      url: "{:url('cate/lists')}",
			      dataType: 'json',
			      success: function(data){
			  	  var trees = authtree.listConvert(data.data, {
			  	      primaryKey: 'id'
			  	      ,startPid: 0
			  	      ,parentKey: 'parentId'
			  	      ,nameKey: 'name'
			  	      ,valueKey: 'id',
					  checkedKey:{$data.cate}
			  	  });
		    var selectList = authtree.treeConvertSelect(trees, {
		      childKey: 'list',
		    });
		    var string =  laytpl($('#LAY-auth-tree-convert-select').html()).render({
		      layFilter: 'LAY-auth-tree-convert-select-input',
		      list: selectList,
		      code: JSON.stringify(data, null, 2),
		    });
		    $('#LAY-auth-tree-convert-select-dom').html(string);
			form.val('amData',{'cate':{$data.cate}});
		    form.render('select');
		  }
		});
		 }
		 
	};
	var iedit = layedit.build('myLayedit',{
		uploadImage:{
			url:'{:url("article/upload")}',
			amData:$('#editImage').attr('data-am'),
			before:function(res){
				
			}
			}
	});
	
	xaoam.init();
	xaoam.tool();
  });
</script>
</html>
